<template>
      <div class="admin">
            <el-container style="height: 500px; border: 1px solid #eee">
                  <!-- 顶部 -->
                  <el-header style="text-align: left; font-size: 14px; height: 8vh">
                  <el-col :span="3" class="top-title">
                        <h3 class="transitionTextBg">管理员系统</h3>
                  </el-col>
                  <el-col :span="21" class="top-admin">
                        <el-dropdown>
                              <i class="el-icon-setting" style="margin-right: 15px" ></i>
                              <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>
                                    <div @click="toIndex">安全退出</div>
                              </el-dropdown-item>
                              </el-dropdown-menu>
                        </el-dropdown>
                        <span>二饭</span>
                  </el-col>
                  </el-header>
                  <el-container>
                  <el-aside width="200px">
                        <!-- 菜单栏 -->
                        <el-menu :default-openeds="['1','2','3']">
                              <!-- 博客管理 -->
                              <el-submenu index="1">
                                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                                    <el-menu-item index="1-1" @click="renderList" class="my-menu-item">博文管理</el-menu-item>
                              </el-submenu>
                              <!-- 用户管理 -->
                              <el-submenu index="2">
                                    <template slot="title"><i class="el-icon-user"></i>用户管理</template>
                                    <el-menu-item index="2-1" @click="toMenu('2-1')" class="my-menu-item">访客记录</el-menu-item>
                              </el-submenu>
                              <!-- 系统管理 -->
                              <el-submenu index="3">
                                    <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
                                    <el-menu-item index="3-1" @click="toMenu('3-1')" class="my-menu-item">二维码管理</el-menu-item>
                                    <el-menu-item index="3-2" @click="toMenu('3-2')" class="my-menu-item">留言管理</el-menu-item>
                                    <el-menu-item index="3-3" @click="toMenu('3-3')" class="my-menu-item">异常记录</el-menu-item >
                              </el-submenu>
                        </el-menu>
                  </el-aside>
                  <!-- 主体部分 -->
                  <el-main>
                        <h3 v-if="index == '0-0'">暂无数据~</h3>
                        <!-- 博文管理 -->
                        <div v-if="index == '1-1'">
                              <div style="text-align: right; padding-bottom: 10px">
                                    <el-button type="primary" icon="el-icon-plus" round @click="addItem" size="small" >添加博文</el-button>
                                    <el-button type="danger" icon="el-icon-delete" round size="small" :disabled="multipleSelection.length == 0" @click="preview">批量删除</el-button>
                              </div>
                              <el-table :data="blogList" ref="multipleTable" @select="selectionRow" @select-all="selectionRowAll" :cell-style="cellStyle">
                                    <el-table-column type="selection" width="55"></el-table-column>
                                    <el-table-column prop="id" label="ID" width="110"></el-table-column>
                                    <el-table-column prop="title" label="标题" width="250"></el-table-column>
                                    <el-table-column prop="writer" label="作者" width="140"></el-table-column>
                                    <el-table-column prop="address" label="地址" width="250"></el-table-column>
                                    <el-table-column prop="date" label="日期" width="160" ></el-table-column>
                                    <el-table-column prop="label" label="标签" width="150" ></el-table-column>
                                    <el-table-column prop="handle" label="操作">
                                          <template slot-scope="blogList">
                                                <el-button type="warning" icon="el-icon-edit" circle @click="editItem(blogList.$index,blogList.row)"></el-button>
                                                <el-button type="danger" icon="el-icon-delete" circle @click="delItem($event,blogList.$index,blogList.row)"></el-button>
                                          </template>
                                    </el-table-column>
                              </el-table>
                        </div>
                        <!-- 访客记录 -->
                        <div v-if="index=='2-1'">
                              <User></User>
                        </div>
                        <!-- 二维码管理 -->
                        <div v-if="index == '3-1'">
                              <h1 class="del-qrcode">戳☟清理二维码</h1>
                              <el-button class="del-qrcode-btn" type="danger" round @click="delQrcode">清理二维码</el-button>
                        </div>
                        <!-- 留言管理 -->
                        <div v-if="index == '3-2'">
                              <Message></Message>
                        </div>
                        <div v-if="index == '3-3'">
                              <Error></Error>
                        </div>

                        <!--   ==========================弹出层========================   -->
                        <!-- 添加编辑博文弹出层 -->
                        <el-dialog
                              :title="ruleFormTitle"
                              :visible.sync="dialogFormVisible"
                              width="30%"
                              :show-close="false"
                              @close="close"
                        >
                              <el-form
                              :model="ruleForm"
                              :rules="rules"
                              ref="ruleForm"
                              >
                              <el-form-item
                                    label="标题"
                                    :label-width="formLabelWidth"
                                    prop="title"
                              >
                                    <el-input
                                          v-model="ruleForm.title"
                                          autocomplete="off"
                                          @change="isChange = true"
                                    ></el-input>
                              </el-form-item>
                              <el-form-item
                                    label="作者"
                                    :label-width="formLabelWidth"
                                    prop="writer"
                              >
                                    <el-input
                                          v-model="ruleForm.writer"
                                          autocomplete="off"
                                          value="二饭"
                                          @change="isChange = true"
                                          >二饭</el-input
                                    >
                              </el-form-item>
                              <el-form-item
                                    label="地址"
                                    :label-width="formLabelWidth"
                                    prop="address"
                              >
                                    <el-input
                                          v-model="ruleForm.address"
                                          autocomplete="off"
                                          @change="isChange = true"
                                    ></el-input>
                              </el-form-item>
                              <el-form-item
                                    label="日期"
                                    :label-width="formLabelWidth"
                                    prop="date"
                              >
                                    <el-date-picker
                                          v-model="currentDate"
                                          style="width: 100%"
                                          @change="isChange = true"
                                          type="date"
                                          placeholder="选择日期"
                                          format="yyyy/MM/dd"
                                          value-format="timestamp"
                                          :picker-options="pickerOptions"
                                    ></el-date-picker>
                              </el-form-item>
                              <el-form-item
                                    label="标签"
                                    :label-width="formLabelWidth"
                                    prop="label"
                              >
                                    <el-input
                                          v-model="ruleForm.label"
                                          autocomplete="off"
                                          @change="isChange = true"
                                    ></el-input>
                              </el-form-item>
                              </el-form>
                              <div slot="footer" class="dialog-footer">
                              <el-button @click="cancel">取 消</el-button>
                              <el-button type="primary" @click="saveItem"
                                    >保 存</el-button
                              >
                              </div>
                        </el-dialog>
                        <!-- 批量删除弹出层 -->
                        <el-dialog
                              :title="dialogTableTitle"
                              :visible.sync="dialogTableVisible"
                              width="60%"
                        >
                              <el-table :data="multipleSelection">
                              <el-table-column prop="id" label="ID" width="100">
                              </el-table-column>
                              <el-table-column
                                    prop="title"
                                    label="标题"
                                    width="200"
                              >
                              </el-table-column>
                              <el-table-column
                                    prop="writer"
                                    label="作者"
                                    width="80"
                              >
                              </el-table-column>
                              <el-table-column
                                    prop="address"
                                    label="地址"
                                    width="250"
                              >
                              </el-table-column>
                              <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="100"
                              >
                              </el-table-column>
                              <el-table-column
                                    prop="label"
                                    label="标签"
                                    width="150"
                              >
                              </el-table-column>
                              </el-table>
                              <div slot="footer" class="dialog-footer">
                              <el-button @click="cancelDel">取 消</el-button>
                              <el-button type="danger" @click="batchDel"
                                    >删 除</el-button
                              >
                              </div>
                        </el-dialog>
                  </el-main>
                  </el-container>
            </el-container>
      </div>
</template>
<script>
import Message from "./message.vue"
import User from "./user.vue"
import Error from "./error.vue"
export default {
    components: {
        Message,
        User,
        Error
    },
    props: [],
    data() {
        return {
            blogList: [], // 博文列表
            index: "0-0", // 当前显示的窗口
            dialogFormVisible: false, // 添加博文弹出层
            dialogTableVisible: false, // 批量删除弹出层
            formLabelWidth: "50px",
            ruleForm: {
                title: "",
                writer: "二饭",
                address: "",
                date: new Date().getTime(),
                label: "",
                id: "",
            },
            rules: {
                title: [
                    { required: true, message: "请输入文章标题" },
                    {
                        min: 2,
                        max: 31,
                        message: "长度在 2 到 31 个文字",
                        trigger: "blur",
                    },
                ],
                writer: [
                    { required: true, message: "请输入文章作者" },
                    {
                        min: 2,
                        max: 8,
                        message: "长度在 2 到 7 个文字",
                        trigger: "blur",
                    },
                ],
                address: [
                    { required: true, message: "请输入文章地址" },
                    {
                        min: 8,
                        max: 128,
                        message: "长度在 8 到 128 个字符",
                        trigger: "blur",
                    },
                ],
                label: [
                    { required: false, message: "请输入文章标签" },
                    {
                        min: 2,
                        max: 8,
                        message: "长度在 2 到 8 个文字",
                        trigger: "change",
                    },
                ],
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            multipleSelection: [],
            isChange: false,
            ruleFormTitle: "",
            dialogTableTitle: "",
            currentEdit: {},
            currentDate: 0,
        };
    },
    created() {},
    methods: {
        // 安全退出
        toIndex() {
            window.sessionStorage.removeItem("token");
            this.$router.push("/index");
        },
        // 表单初始化
        formInit() {
            this.ruleForm = {
                title: "",
                writer: "二饭",
                address: "",
                date: new Date().getTime(),
                label: "",
                id: "",
            };
        },
        // 渲染博客列表
        renderList() {
            this.$root.loading = true;
            this.index = "1-1";
            const that = this;
            this.$axios
                .get(this.$url + "/api/blog/getBlogEntry")
                .then(function (res) {
                    that.blogList = res.data.data.entryList;
                    that.blogList.forEach((item) => {
                        item.date = that.dateFormat(item.date);
                    });
                    that.$root.loading = false;
                })
                .catch(function () {
                    that.$root.loading = false;
                    that.$message({
                        message: "未请求到数据，请联系管理员",
                        type: "warning",
                    });
                });
        },
        // 时间戳转日期格式化
        dateFormat(e) {
            var time = new Date(e);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            return y + "-" + m + "-" + d;
        },
        // 自定义日期格式转时间戳
        formatDate(e) {
            let date = new Date(e);
            let timestamp = Date.parse(date);
            return timestamp;
        },
        // 添加博文条目
        addItem() {
            this.ruleFormTitle = "添加博文";
            this.dialogFormVisible = true;
            this.currentDate = new Date().getTime();
        },
        //编辑博文条目
        editItem(i) {
            this.ruleFormTitle = "编辑博文";
            this.ruleForm = this.blogList[i];

            this.currentDate = this.formatDate(this.ruleForm.date);

            this.dialogFormVisible = true;
        },
        // 保存添加或修改
        saveItem() {
            const that = this;
            let form = this.ruleForm;

            // 判断必填项是否为空
            if (form.title == "" || form.writer == "" || form.address == "") {
                that.$message({
                    message: "请将带*号的项目填满哦",
                    type: "warning",
                });
                return;
            }

            this.$root.loading = true;
            let format = new FormData();

            // 判断编辑还是添加，请求添加不同数据
            if (this.ruleFormTitle == "编辑博文") {
                format.append("id", form.id);
                format.append("date", this.formatDate(that.currentDate));
            } else {
                format.append("date", that.currentDate);
            }
            format.append("title", form.title);
            format.append("writer", form.writer);
            format.append("address", form.address);
            format.append("label", form.label);

            // 判断表单是否被修改
            if (this.isChange) {
                this.$axios({
                    method: "post",
                    url: this.$url + "/api/blog/editBlogEntry",
                    data: format,
                }).then(function (res) {
                    that.renderList();
                    if (res.data.status.code == 204) {
                        that.$root.loading = false;
                        that.renderList();
                        that.$message({
                            message: that.ruleFormTitle + "条目成功",
                            type: "success",
                        });
                    } else {
                        that.$root.loading = false;
                        that.$message.error("服务器异常，请稍后再试！");
                    }
                });
            } else {
                that.$root.loading = false;
            }

            this.formInit();
            this.$refs.ruleForm.resetFields();
            this.dialogFormVisible = false;
        },

        // 取消输入
        cancel() {
            this.$message("已取消操作");
            this.renderList();
            this.formInit();
            this.dialogFormVisible = false;
        },

        // 弹出层关闭回调
        close() {
            this.renderList();
            this.formInit();
            // 强制刷新表单验证
            this.$refs.ruleForm.resetFields();
        },

        // 强制button失去焦点
        btnBlur(e) {
            let target = e.target;
            if (target.nodeName == "SPAN" || target.nodeName == "I") {
                target = e.target.parentNode;
            }
            target.blur();
        },

        // 删除单个条目
        delItem(e, i, data) {
            const that = this;

            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    that.$root.loading = true;
                    let format = new FormData();
                    format.append("id", data.id);
                    that.$axios({
                        method: "post",
                        url: that.$url + "/api/blog/delEntryById",
                        data: format,
                    }).then(function (res) {
                        if (res.data.status.code == 200) {
                            that.renderList();
                            that.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            that.$root.loading = false;
                            that.$message.error("服务器异常，请稍后再试！");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });

            this.btnBlur(e);
        },

        // 选中某行
        selectionRow(selection) {
            this.multipleSelection = selection;
        },

        // 选中全部
        selectionRowAll(selection) {
            this.multipleSelection = selection;
        },

        // 预览批量删除条目
        preview() {
            this.dialogTableTitle =
                "确认删除以下" + this.multipleSelection.length + "条数据？";
            this.dialogTableVisible = true;
        },

        // 批量删除
        batchDel() {
            const that = this;
            let format = new FormData();

            this.$root.loading = true;
            // 遍历被选中条目id
            this.multipleSelection.forEach((item) => {
                format.append("ids", item.id);
            });

            this.$axios({
                method: "delete",
                url: this.$url + "/api/blog/delEntryByIds",
                data: format,
            }).then(function (res) {
                if (res.data.status.code == 200) {
                    that.renderList();
                    that.$message({
                        type: "success",
                        message: res.data.status.message,
                    });
                } else {
                    that.$root.loading = false;
                    that.$message.error("服务器异常，请稍后再试！");
                }
            });
            this.dialogTableVisible = false;
        },

        // 取消删除
        cancelDel() {
            this.dialogTableVisible = false;
            this.$message({
                type: "info",
                message: "已取消删除",
            });
        },

        // 指定列样式
        cellStyle({ row, column, rowIndex, columnIndex }) {
            row, column, rowIndex, columnIndex;
            if (columnIndex === 1) {
                // 指定列号
                return "color:#409EFF";
            } else {
                return "";
            }
        },

        // 跳转菜单
        toMenu(menu) {
            this.index = menu;
        },

        // 清理二维码
        delQrcode(e) {
            const that = this;

            this.$axios({
                method: "post",
                url: this.$url + "/api/qrcode/admin/clearQRCodeFiles",
            }).then(function (res) {
                if (res.data.status.code == 200) {
                    that.$message({
                        message: res.data.status.message,
                        type: "success",
                    });
                } else {
                    that.$message({
                        message: "未请求到数据，请联系管理员",
                        type: "warning",
                    });
                }
            });
            this.btnBlur(e);
        },
    },
};
</script>




















<style lang='less'>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 8vh;

    .top-title {
        padding-left: 30px;
        text-align: left;
    }

    .top-admin {
        text-align: right;
    }
}

.el-aside {
    color: #333;
}

.my-menu-item {
    text-align: right;
}

.del-qrcode {
    margin-bottom: 20px;
    letter-spacing: 10px;
}
</style>